<template>
  <div class="container">
    <el-card class="headers" shadow="hover" v-if="!isMobile">
      <TagList type="article" />
    </el-card>
    <el-container
      :class="!isMobile ? 'layout-container' : 'mobile-container'"
      style="margin-top: 20px"
    >
      <el-aside class="sidebar" :width="!isMobile ? '70%' : '100%'">
        <article-list></article-list>
      </el-aside>
      <el-main class="content" v-if="!isMobile">
        <AnnouncementCard />
        <RankList />
        <!-- <RankList style="font-family:none" /> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ArticleList from './ArticleList'
import RankList from '@/components/Rank/RankList'
import TagList from '@/components/Article/TagList'
import AnnouncementCard from '@/components/Tools/AnnouncementCard'
export default {
  props: {},
  components: {
    ArticleList,
    TagList,
    RankList,
    AnnouncementCard
  },
  data() {
    return {}
  },
  computed: {
    isMobile() {
      return this.$data.isMobile
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    RefreshPage() {}
  }
}
</script>

<style scoped>
.container {
  position: relative;
}
.layout-container {
  z-index: 1;
  width: 100%;
  position: relative;
  /* top: 20px; */
}
.mobile-container {
  z-index: 1;
  position: relative;
}
.headers {
  /* position: absolute; */
  z-index: 2;
  width: 100%;
  margin: 0px auto 20px auto;
}
.content {
  padding: 0px;
}
.el-divider--horizontal {
  margin: 7px 0;
}
.announcement {
  margin-left: 20px;
  margin-bottom: 20px;
}
/*  */
</style>
